<template>
    <div class="room_page">
        <roomCom :id="'asdfsadf'" :roomType="roomType" :config="config" :key="roomType"></roomCom>

        <div class="select_type">
            <el-select v-model="roomType" placeholder="工单状态" style="width: 240px">
                <el-option v-for="dict in rittal_name_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
            <!-- <select name="roomType" id="">
                <option v-for="dict in rittal_name_type" :key="dict.value" value="dict.value">{{ dict.label }}</option>
            </select> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import roomCom from "../components/roomCom.vue"

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { rittal_name_type } = toRefs<any>(proxy?.useDict("rittal_name_type"));

let roomType = ref("2")

const config = computed(()=>{
    if(roomType.value == '1') {
        return {
            num: 8, //每行最多有多少台
            space: 10, //行内间距
            row_space: 50, // 行间距
        }
    } else {
        return {
            num: 4, //每行最多有多少台
            space: 10, //行内间距
            row_space: 50, // 行间距
        }
    }
})

</script>

<style scoped lang="scss">
.room_page {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
    background-image: url("@/assets/images/3D/bg2.jpg");
    background-size: 100% 100%;
    .select_type {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 99999;
        :deep(.el-select) {
            .el-input__wrapper {
                background: transparent !important;
                border-radius: 0;
            }
        }
    }
    
}
</style>